<template>
  <div class="c_item" @touchstart.stop="start($event)" @touchmove="move($event)" @touchend="end($event)" :style="{left: ($parent.site[index] ? $parent.site[index].pos * 100 + '%': 0), 'z-index': ($parent.site[index] ? $parent.site[index].zIndex: 0)}" :class="{animate: !$parent.isTouch}">
    <slot></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tx: null,
      dis: 0,
      delay: null,
      index: 0,
      olddis: null
    };
  },
  props: ["name", "url"],
  mounted() {
    this.index = 0;
    while ((this.$el = this.$el.previousElementSibling)) {
      this.index++;
    }
  },
  methods: {
    start(e) {
      if(!this.$parent.able){
        return
      }
      this.tx = e.touches[0].clientX;
    },
    move(e) {
      if(!this.$parent.able){
        return
      }
      this.dis = (e.touches[0].clientX - this.tx) / window.innerWidth;
      if (this.$parent.site.length == 2 && ((this.dis == Math.abs(this.dis)) != (this.olddis == Math.abs(this.olddis)) || this.olddis == null)) {
        if (this.dis < 0) {
          if (this.$parent.active) {
            this.$parent.site[0] = {
              pos: 1,
              zIndex: 0
            };
            this.$parent.dsite[0] = {
              pos: 1,
              zIndex: 0
            };
          } else {
            this.$parent.site[1] = {
              pos: 1,
              zIndex: 0
            };
            this.$parent.dsite[1] = {
              pos: 1,
              zIndex: 0
            };
          }
        }
      }
      for (var i = 0; i < this.$parent.site.length; i++) {
        this.$parent.site[i].pos = this.$parent.dsite[i].pos + this.dis;
      }
      this.$parent.$set(this.$parent.site, 0, this.$parent.site[0]);
      this.olddis = this.dis
    },
    end(e) {
      if(!this.$parent.able){
        return
      }
      this.$parent.isTouch = false;
      this.olddis = null
      var c = 0;
      if (this.dis > 0.3) {
        this.$parent.count = 1;
      } else if (this.dis < -0.3) {
        this.$parent.count = -1;
      }
      this.$parent.active = (this.$parent.active - this.$parent.count) % this.$parent.site.length;
      if (this.$parent.active < 0) {
        this.$parent.active += this.$parent.site.length;
      }
      this.$parent.go();
    }
  }
};
</script>
